<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    title: string
    desc: string
    contentClass?: string
  }>(),
  {
    title: '',
    desc: '',
    contentClass: '',
  },
)
</script>

<template>
  <div class="h-full w-full border border-gray-500 rounded-md card">
    <div
      class="h-[48px] relative flex justify-between items-center p-3 before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1 before:h-[70%] before:bg-blue-500 before:rounded-r"
    >
      <div class="flex items-center ml-2">
        <div class="text-lg font-bold bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text">
          {{ title }}
        </div>
        <div class="w-2 h-2 rounded-full bg-blue-500 ml-2 animate-pulse"></div>
      </div>
      <slot name="desc">
        <div class="text-xs text-gray-300 px-1 py-1 rounded-full">{{ desc }}</div>
      </slot>
    </div>
    <div class="px-2 h-full flex flex-col" style="height: calc(100% - 52px)" :class="contentClass">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.card {
  transition: box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  border: none;
  background: linear-gradient(to bottom, #f3f9ff, #c1cedd);
  border-radius: 20px;
  padding: 5px 5px 0 5px;
}

/* .card::before,
.card::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0066ff, transparent);
  animation: borderAnimation 3s linear infinite;
} */

.card::before {
  top: 0;
  left: -100%;
}

.card::after {
  bottom: 0;
  right: -100%;
  animation-delay: 1.5s;
}

.card:hover {
  transform: translateY(-2px);
  transition: transform 0.5s;
  /* border: 1px solid rgba(0, 123, 255, 0.5); */
  /* box-shadow: 0 0 15px rgba(0, 123, 255, 0.2); */
}

@keyframes borderAnimation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200%);
  }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
.text-lg {
  color: #393939;
  /* font-size: 24px; */
  font-size: 1.25rem;
}
</style>
